/*
 * @Description: api 表单
 * @Author: DHL
 * @Date: 2022-03-14 17:13:43
 * @LastEditors: DHL
 * @LastEditTime: 2022-09-06 09:45:03
 */

import { defineComponent, computed, onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { assign } from 'lodash-es'
import { apiApiGroupRefreshApis } from '/@/api/system/apiGroup'
import { log } from '/@/utils/log'

export default defineComponent({
  name: 'ApiForm',
  emits: ['refreshTableData'],
  setup(props, { emit, expose }) {
    //////////////////////////////////////////////////
    // 属性
    //////////////////////////////////////////////////
    const dbFormRef = ref()
    const loading = ref(true)

    /**
     * 表单操作标记
     */
    const action = ref('add')

    /**
     * 显示弹框
     */
    const visible = ref(false)

    /**
     * 标题
     */
    const title = computed(() => {
      let rtn = ''
      switch (action.value) {
        case 'add':
          rtn = '新增'
          break
        case 'edit':
          rtn = '编辑'
          break
        default:
          rtn = '查看'
          break
      }
      return rtn
    })

    /**
     * 公共
     */
    const commonObj = reactive({
      projectId: '',
      apiGroupPid: '',
      projectName: '',
      parentGroupName: '',
      typeOption: [
        {
          value: '1',
          label: '包名'
        },
        {
          value: '2',
          label: '类名'
        }
      ]
    })

    //////////////////////////////////////////////////
    // 表单
    //////////////////////////////////////////////////

    let dbForm = reactive({
      projectId: '',
      apiGroupPid: '',
      type: '1',
      packagesOrClasses: ''
    })

    //////////////////////////////////////////////////
    // 表单验证规则
    //////////////////////////////////////////////////

    /**
     * 表单验证规则
     */
    const rules = reactive({
      projectId: [
        {
          required: true,
          message: '请选择所属项目',
          trigger: 'blur'
        }
      ],
      apiGroupPid: [
        {
          required: false,
          message: '请选择父级分组',
          trigger: 'blur'
        }
      ],
      type: [
        {
          required: true,
          message: '请选择类别',
          trigger: 'blur'
        }
      ],
      packagesOrClasses: [
        {
          required: true,
          message: '请输入包名/类名（多个用英文逗号隔开）',
          trigger: 'blur'
        }
      ]
    })

    //////////////////////////////////////////////////
    // 函数
    //////////////////////////////////////////////////

    /**
     * 打开弹框
     */
    function handleOpen(params: any) {
      visible.value = true
      loading.value = false

      assign(commonObj, {
        projectId: params.projectId,
        apiGroupPid: params.apiGroupPid,
        projectName: params.projectName,
        parentGroupName: params.parentGroupName
      })
    }

    /**
     * 关闭弹框
     */
    function handleClose() {
      assign(dbForm, {
        projectId: '',
        apiGroupPid: '',
        type: '1',
        packagesOrClasses: ''
      })
      visible.value = false
    }

    /**
     * 提交表单
     */
    function handleSubmit(isContinue: boolean) {
      assign(dbForm, {
        projectId: commonObj.projectId,
        apiGroupPid: commonObj.apiGroupPid
      })

      dbFormRef.value.validate((valid: boolean) => {
        if (valid) {
          loading.value = true
          apiApiGroupRefreshApis({
            projectId: commonObj.projectId,
            apiGroupPid: commonObj.apiGroupPid,
            type: dbForm.type,
            packagesOrClasses: dbForm.packagesOrClasses
          })
            .then((result) => {
              if (result?.success) {
                ElMessage.success(result.message)

                handleReset(!isContinue)
              } else {
                ElMessage.error(result?.message)
              }
            })
            .catch(() => { })
            .finally(() => {
              loading.value = false
            })
        } else {
          log.warn('API组管理', '表单校验失败')
        }
      })
    }

    /**
     * 重置表单
     * @param isClosed 是否关闭弹框
     */
    function handleReset(isClosed: boolean) {
      assign(dbForm, {
        projectId: '',
        apiGroupPid: '',
        type: '',
        packagesOrClasses: ''
      })
      if (isClosed) {
        emit('refreshTableData')
        visible.value = false
      }
    }

    //////////////////////////////////////////////////
    // 生命周期
    //////////////////////////////////////////////////
    onMounted(() => { })

    /**
     * 暴露函数
     */
    expose({ handleOpen })

    return {
      loading,
      visible,
      action,
      title,
      dbFormRef,
      dbForm,
      rules,
      commonObj,
      handleOpen,
      handleClose,
      handleSubmit,
      handleReset
    }
  }
})
